<script setup>
import {defineProps} from "vue";
import {followApi} from "@/apis/followApi.js";
import {ref,onMounted} from "vue";
import UserAvatar from "@/components/UserAvatar/UserAvatar.vue";

// const props = defineProps({
//   username: String,
//   userId: Number,
// })
//
// const isFollow = ref(false);
//
// const fetchUserInfo = async () => {
//   const followres = await followApi.checkFollow(props.userId);
//   isFollow.value = followres.data;
//   console.log('isfollow',followres);
// }
//
// const toggleFollow = async () => {
//   try{
//     if (isFollow){
//       await followApi.addFollow(props.userId);
//       isFollow.value = true;
//     } else {
//       await followApi.deleteFollow(props.userId);
//       isFollow.value = false;
//     }
//   } catch (e) {
//     ElMessage.error('关注失败')
//   }
// }
//
// onMounted( () => {
//   fetchUserInfo();
// })

const props = defineProps({
  username: String,
  userId: Number,
});

const isFollow = ref(false);

// 根据 followres.data 的值来设置 isFollow 状态
const fetchUserInfo = async () => {
  try {
    const followres = await followApi.checkFollow(props.userId);
    console.log('checkFollow response:', followres);

    if (followres.data === 1) {
      isFollow.value = true;
    } else if (followres.data === 0) {
      isFollow.value = false;
    } else {
      console.warn('Unexpected follow status:', followres.data);
      ElMessage.warning('无法获取关注状态');
    }
  } catch (error) {
    console.error('Error fetching user info:', error);
    ElMessage.error('获取用户信息失败');
  }
};

const toggleFollow = async () => {
  try {
    if (isFollow.value) {
      // 如果已经关注，则取消关注
      await followApi.deleteFollow(props.userId);
      isFollow.value = false;
      ElMessage.success('取消关注成功');
    } else {
      // 如果未关注，则添加关注
      await followApi.addFollow(props.userId);
      isFollow.value = true;
      ElMessage.success('关注成功');
    }
  } catch (error) {
    ElMessage.error('操作失败');
    console.error('Error toggling follow:', error);
  }
};

onMounted(() => {
  fetchUserInfo();
});

</script>

<template>
  <div class="up_info">
    <UserAvatar class="avatar"></UserAvatar>
    <div class="detail">
      <div class="username">
        {{ props.username }}
      </div>
      <!--        <div class="abstract">-->
      <!--          {{ 111111111111111 }}-->
      <!--        </div>-->
      <el-button class="follow_button" v-if="!isFollow" @click="toggleFollow">
        关注
      </el-button>
      <el-button class="follow_button" v-if="isFollow" @click="toggleFollow">
        已关注
      </el-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.up_info{
  width: 100%;
  position: relative;
  top: 10px;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0 auto;
  height: fit-content;
  align-self: flex-end;
  padding-bottom: 22px;

  .avatar{
    height: 80px;
    width: 80px;
    margin-left: 10%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
  }

  .detail{
    flex: 1;
    margin-left: 30px;

    .username{
      font-size: 24px;
      font-weight: 700;
      color: black;
      margin-right: 8px;

    }

    //.abstract{
    //  font-size: 17px;
    //  //font-weight: 700;
    //  color: black;
    //  margin-right: 8px;
    //  text-shadow: 0px 1px 2px rgba(0, 0, 0, .4);
    //}
    .follow_button{
      display: flex;
      justify-content: center;
      align-items: center;
      width: 96px;
      height: 35px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 700;
      transition: background-color .3s;
    }
  }
}
</style>
